{% extends 'basic_app/master.html' %}
{% block tag_left %}
    {% include 'basic_app/tag_left_user.html' %}
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h2 class="page-header">本系统主机的管理页</h2>
        <div class="table-responsive">
            {#            <form class="navbar-form navbar-left" action="/basic_app/user_search"  role="search" method="post">#}
            <form class="navbar-form navbar-left" role="search">
                {% include 'basic_app/search.html' %}
                <button type="button" class="btn btn-primary" onclick="add()"><span
                        class="glyphicon glyphicon-plus" aria-hidden="true"></span> 添加主机
                </button>
            </form>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    {#                    <th>+</th>#}
                    <th>名称</th>
                    <th>主机名</th>
                    <th>描述</th>
                    <th>IP</th>
                    <th>port</th>
                    <th>管理IP</th>
                    <th>其它IP</th>
                    <th>状态</th>
                    <th>类别</th>
                    <th>操作系统版本</th>
                    <th>位置</th>
                    <th>修改时间</th>
                    <th>创建时间</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tabbody">
                {% for i in current_page %}
                    <tr>
                        {#                        <td><input type="checkbox"/></td>#}
                        <td style="display:none">{{ i.id }}</td>
                        <td>{{ i.name }}</td>
                        <td>{{ i.hostname }}</td>
                        <td>{{ i.desc }}</td>
                        <td>{{ i.ip }}</td>
                        <td>{{ i.port }}</td>
                        <td>{{ i.gm_ip }}</td>
                        <td>{{ i.other_ip }}</td>
                        <td>{{ i.status }}</td>
                        <td>{{ i.type }}</td>
                        <td>{{ i.osversion }}</td>
                        <td>{{ i.place }}</td>
                        <td>{{ i.chtime| date:'Y-m-d H:i:s'}}</td>
                        <td>{{ i.crtime| date:'Y-m-d H:i:s'}}</td>
                        <td>{{ i.remark }}</td>
                        <td><a style="cursor:pointer"  id="edit" onclick="edit({{ i.id }})" nid="{{ i.id }}">编辑</a> |
                            <a style="cursor:pointer"  href="/basic_app/host_delete?nid={{ i.id }}"
                               onclick="if(confirm('确认删除吗？')==false)return false;">删除</a> |
                            <a style="cursor:pointer"  href="/basic_app/host_lock?nid={{ i.id }}">锁定</a> |
                            <a style="cursor:pointer"  href="/basic_app/host_more?nid={{ i.id }}">查看详情</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {#        以上是分页#}
            {% include 'basic_app/paginator.html' %}
            {#        以下是分页#}
        </div>
    </div>
    <!-- 模态框（Modal） 添加 / 编辑-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="docModalContent" style="width:600px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">添加、修改主机信息</h4>
                </div>
                <span>&nbsp</span>
                <form class="form-horizontal" style="padding-left: 10%" id="editForm">
                    <div class="form-group" style="display: none">
                        <label class="col-sm-2 control-label">id：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_id"
                                   placeholder="id">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" id="name" class="form-control" name="add_name"
                                   placeholder="名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">主机名：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" id="host_name" class="form-control"
                                   name="add_hostname"
                                   placeholder="主机名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">描述：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" id="add_desc" class="form-control"
                                   name="add_desc"
                                   placeholder="描述">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Ip：</label>
                        <div class="col-sm-10">
                            <input type="text" id="onsubmit_ip" style="width:300px;" class="form-control"
                                   name="add_ip"
                                   placeholder="Ip">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">port：</label>
                        <div class="col-sm-10">
                            <input type="text" id="onsubmit_port" style="width:300px;" class="form-control"
                                   name="add_port"
                                   placeholder="port">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gm_ip：</label>
                        <div class="col-sm-10">
                            <input type="text" id="onsubmit_gm_ip" style="width:300px;" class="form-control"
                                   name="add_gm_ip"
                                   placeholder="管理ip">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">other_ip：</label>
                        <div class="col-sm-10">
                            <input type="text" id="onsubmit_other_ip" style="width:300px;" class="form-control"
                                   name="add_other_ip"
                                   placeholder="其它ip">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">status：</label>
                        <div class="col-sm-10">
                            <select class="form-control" style="width:300px;" name="add_status" id="add_status">
                                <option>活动</option>
                                <option>停用</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">type：</label>
                        <div class="col-sm-10">
                            <select class="form-control" style="width:300px;" name="add_type" id="add_type">
                                <option>Linux</option>
                                <option>Windows</option>
                                <option>Aix</option>
                                <option>Other</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">osversion：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_osversion"
                                   placeholder="操作系统版本">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">place：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_place"
                                   placeholder="位置">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">remark：</label>
                        <div class="col-sm-10">
                            <input type="text" style="width:300px;" class="form-control" name="add_remark"
                                   placeholder="备注">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" data-loading-text="Loading..." class="btn btn-primary" id="host_submit"
                                onclick="button_submit()">提交
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
{% endblock %}

{% block script %}
    <script>

        //添加主机信息时，验证
        //提交按钮事件
        function button_submit() {
            var ip = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
            var port = /^[0-9]{1,5}$/;
            var name = document.getElementById("name");
            var host_name = document.getElementById("host_name");
            var onsubmit_ip = document.getElementById("onsubmit_ip");
            var onsubmit_port = document.getElementById("onsubmit_port");
            var onsubmit_gm_ip = document.getElementById("onsubmit_gm_ip");
            if (name.value == '' || name.value == null) {
                alert("请输入名称");
                return false;
            }
            if (host_name.value == '' || host_name.value == null) {
                alert("请输入主机名");
                return false;
            }
            if (onsubmit_ip.value == '' || onsubmit_ip.value == null) {
                alert("请输入ip");
                return false;
            }
            if (onsubmit_port.value == '' || onsubmit_port.value == null) {
                alert("请输入port");
                return false;
            }
            if (!ip.test(onsubmit_ip.value)) {
                alert("请输入正确的ip地址");
                return false;
            }
            if (!port.test(onsubmit_port.value)) {
                alert("请输入正确的端口号");
                return false;
            }
            $.ajax({
                type: "POST",
                data: {
                    'add_id': $("input[name='add_id']").val(),
                    'add_name': $("input[name='add_name']").val(),
                    'add_hostname': $("input[name='add_hostname']").val(),
                    'add_desc': $("input[name='add_desc']").val(),
                    'add_ip': $("input[name='add_ip']").val(),
                    'add_port': $("input[name='add_port']").val(),
                    'add_gm_ip': $("input[name='add_gm_ip']").val(),
                    'add_other_ip': $("input[name='add_other_ip']").val(),
                    'add_status': $("#add_status").val(),
                    'add_type': $("#add_type").val(),
                    'add_osversion': $("input[name='add_osversion']").val(),
                    'add_place': $("input[name='add_place']").val(),
                    'add_remark': $("input[name='add_remark']").val(),
                    'line_count_set': $('.line_count').val(),
                    'page_set': $('#page_set').val(),
                    'search': $('.aa_search').val()
                },
                url: "/basic_app/host_add_edit", //后台处理函数的url
                cache: false,
                dataType: "html",
                beforeSend: function () {
                    showLoading()
                    $('#host_submit').button('loading')
                },
                complete: function () {
                    hideLoading()
                    $('#host_submit').button('reset')
                },
                success: function (result) {
                    if (result.substr(0, 8) == "AJAX_ERR") {
                        alert(result);
                    } else {
                        var url = result
                        window.location.href = url
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            })


        }

        //当添加表单时
        function add() {
            //首先清空表单数据
            $("#editForm input").val('');
            //调用模态框
            $('#myModal').modal('show')
        }

        //当编辑表单时回传数据
        function edit(id) {
            var url = "/basic_app/host_add_edit?nid=" + id;
            $.ajax({
                url: url,
                type: "get",
                dataType: "json",
                success: function (res) {
                    $("input[name='add_id']").val(res.id);
                    $("input[name='add_name']").val(res.name);
                    $("input[name='add_hostname']").val(res.hostname);
                    $("input[name='add_desc']").val(res.desc);
                    $("input[name='add_ip']").val(res.ip);
                    $("input[name='add_port']").val(res.port);
                    $("input[name='add_gm_ip']").val(res.gm_ip);
                    $("input[name='add_other_ip']").val(res.other_ip);
                    $("input[name='add_status']").val(res.status);
                    $("input[name='add_type']").val(res.type);
                    $("input[name='add_osversion']").val(res.osversion);
                    $("input[name='add_place']").val(res.place);
                    $("input[name='add_remark']").val(res.remark);
                }
            })
            //调用模态框
            $('#myModal').modal('show')
        }

        $(document).ready(function () {
            $('#tabbody tr').each(function (i) {
                $(this).children('td').each(function (j) {
                    if (j == 8) {
                        console.log($(this).text())
                        if ($(this).text() == '停用') {
                            $(this).css('color', 'red')
                        }
                        if ($(this).text() == '活动') {
                            $(this).css('color', 'green')
                        }
                    }
                });
            })
        })
    </script>

{% endblock %}